<template>
  <div v-if="showContent">
    <ContentLoader primaryColor="#e6e6e6"/>
    <ContentLoader>
      <rect x="60" y="20" rx="3" ry="3" width="250" height="10" />
      <rect x="60" y="40" rx="3" ry="3" width="250" height="10" />
      <rect x="60" y="60" rx="3" ry="3" width="250" height="10" />
      <rect x="60" y="80" rx="3" ry="3" width="250" height="10" />
      <rect x="60" y="100" rx="3" ry="3" width="250" height="10" />
      <rect x="60" y="120" rx="3" ry="3" width="250" height="10" />
    </ContentLoader>
    <ContentLoader>
      <rect x="60" y="20" rx="3" ry="3" width="250" height="10" />
      <rect x="60" y="40" rx="3" ry="3" width="250" height="10" />
      <rect x="60" y="60" rx="3" ry="3" width="250" height="10" />
      <rect x="60" y="80" rx="3" ry="3" width="250" height="10" />
      <rect x="60" y="100" rx="3" ry="3" width="250" height="10" />
      <rect x="60" y="120" rx="3" ry="3" width="250" height="10" />
    </ContentLoader>
  </div>
  <div v-else class="detail-wrapper">
    <header class="header">
      <Back />
      <div class="header-title">{{ info.order_name }}</div>
    </header>
    <div class="info-top">
      <div class="left-container">
        <div border-1px
            aspectratio
            w-218-176
            class="img-wrap">
          <img aspectratio-content
              :src="info.list_pic"
              alt="logo">
        </div>
      </div>
      <div class="right-container">
        <div class="order-no order-item">订单编号：<span>{{ info.order_no }}</span></div>
        <div class="order-name order-item">{{ info.order_name }}</div>
        <div class="order-num order-item">数量：<span>{{ info.count }}</span></div>
      </div>
    </div>
    <ul class="info-bot">
      <li border-bottom-1px class="info-item">
        <div class="info-item-title">电话</div>
        <div class="info-item-content">{{ info.reserve_contact_phone }}</div>
      </li>
      <li border-bottom-1px class="info-item">
        <div class="info-item-title">支付金额</div>
        <div class="info-item-content">{{ info.amount }}</div>
      </li>
      <li border-bottom-1px class="info-item">
        <div class="info-item-title">支付方式</div>
        <div v-if="info.payment === 'wepay'" class="info-item-content">微信</div>
        <div v-if="info.payment === 'alipay'" class="info-item-content">支付宝</div>
        <div v-if="info.payment === 'balance'" class="info-item-content">余额</div>
        <div v-if="info.payment === 'deposit'" class="info-item-content">储值</div>
        <div v-if="info.payment === 'consume'" class="info-item-content">消费额</div>
        <div v-if="info.payment === 'combined'" class="info-item-content">组合支付</div>
      </li>
      <li border-bottom-1px class="info-item">
        <div class="info-item-title">创建时间</div>
        <div class="info-item-content">{{ parseTimeFuc(info.create_at) }}</div>
      </li>
      <li border-bottom-1px class="info-item">
        <div class="info-item-title">支付时间</div>
        <div class="info-item-content">{{ parseTimeFuc(info.pay_at) }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import Back from '@/components/back'
import { ContentLoader } from 'vue-content-loader'
import { parseTime } from '@/utils'
import { orderDetail } from '@/api/detail'
export default {
  name: '',
  components: {
    Back,
    ContentLoader
  },
  data () {
    return {
      showContent: true,
      parseTimeFuc: parseTime
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    async getInfo () {
      const orderId = this.$route.params.id
      this.$toast.loading({
        message: '加载中'
      })
      try {
        const res = await orderDetail({ order_id: orderId })
        this.$toast.clear()
        this.info = { ...res.data }
        this.showContent = false
      } catch (error) {
        this.showContent = false
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'

.detail-wrapper
  initPosition()
  background-color $space

  .header
    width 100%
    height 88px
    background-color $common_bgc
    box-shadow 0px 5px 12px 0px rgba(29, 33, 41, 0.12)
    position relative

    .header-title
      position absolute
      top 50%
      left 50%
      transform translate(-50%, -50%)
      font-size $header_title_size
      color $home_font_color

  .info-top
    width 100%
    background-color $common_bgc
    display flex
    padding-right 24px
    padding-left 24px
    padding-top 32px
    padding-bottom 32px
    box-sizing border-box
    margin-bottom 16px

    .left-container
      width 218px
      margin-right 20px

    .right-container
      flex 1
      min-width 0
      font-size $home_size
      color $home_header_font_color
      line-height 50px

      .order-item
        width 100%
        ellipsis()

      .order-num
        color $home_font_color

  .info-bot
    width 100%
    background-color $common_bgc
    padding-left 24px
    padding-right 24px
    box-sizing border-box
    height calc(100% - 88px - 240px)
    .info-item
      width 100%
      display flex
      justify-content space-between
      line-height 112px
      font-size $home_header_size
      color $home_font_color
      .info-item-content
        color $home_header_font_color
</style>
